<template>
	<view class="address-box" @click="$navTo('pages/mines/address', {type: 'select'})">
		<block v-if="Object.keys(data).length">
			<image src="@/static/img/address-01.png" mode="aspectFit"></image>
			<view class="address-ctn">
				<view class="name">
					{{data.region + data.address}}
				</view>
				<view class="detail">
					{{data.consignee}}<br><br>{{data.mobile}}
				</view>
			</view>
			<view class="icon">
				<u-icon name="arrow-right" color="#a5a5a5" size="40" />
			</view>
		</block>
		<block v-else>
			<view class="empty-box">
				<text>前往选择地址</text>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: "AddressSelect",
		props: {
			data: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {

			};
		},
		onLoad() {},
		methods: {},
	}
</script>

<style lang="scss" scoped>
	.address-box {
		display: flex;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		background: #ffffff;
		box-shadow: 0 16rpx 40rpx 0 #00000008;

		>image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.address-ctn {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.name {
		color: #000000;
		font-size: 28rpx;
	}

	.detail {
		margin-top: 20rpx;
		color: #a5a5a5;
		font-size: 24rpx;
	}

	.icon {
		display: flex;
		align-items: center;
		margin-left: 70rpx;
	}
</style>